<template>
	<el-dialog :visible.sync="dialogVisible" @open="dialogOpen">
		<div slot="title">维护
			<el-tag>{{role.name}}</el-tag>权限</div>
		<el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText" style="padding-bottom: 5px;"></el-input>
		<el-tree ref="tree" show-checkbox check-on-click-node default-expand-all :props="{label: 'title'}" highlight-current node-key="id" :data="permissionList" :filter-node-method="filterNode" :expand-on-click-node="false">
			<span slot-scope="{ node, data }">
				<i v-if="data.type==2" class="fa fa-cog"></i>&nbsp;{{ node.label }}
			</span>
		</el-tree>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" :loading="loading" @click="saveRolePermission">保存</el-button>
			<el-button @click="close">取消</el-button>
		</div>
	</el-dialog>

</template>
<script>
import roleService from "@/api/sys/role";
import menuService from "@/api/sys/menu";
export default {
	name: "rolePermission",
	props: {
		role: Object,
		value: Boolean
	},
	data() {
		return {
			loading: false,
			dialogVisible: false,
			filterText: "",
			permissionList: []
		};
	},
	watch: {
		value(val) {
			this.dialogVisible = val;
		},
		dialogVisible(val) {
			this.$emit("input", val);
		},
		filterText(val) {
			this.$refs.tree.filter(val);
		}
	},
	methods: {
		async dialogOpen() {
			this.permissionList = await menuService.getMenuList();
			let rolePermissions = await roleService.getRolePermissions(this.role.id);
			let rolePermissionList = rolePermissions.map(s => s.functionId);
			this.$refs.tree.setCheckedKeys(rolePermissionList);
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.title.indexOf(value) !== -1;
		},
		saveRolePermission() {
			let checkedNodes = this.$refs.tree.getCheckedNodes(true, false);
			let checkedPermissins = [];
			for (let checked of checkedNodes) {
				checked.type == 2 && checkedPermissins.push(checked.id);
			}
			let data = {
				roleId: this.role.id,
				permissions: checkedPermissins
			};
			this.loading = true;
			roleService.savePermission(data).then(data => {
				this.loading = false;
				this.dialogVisible = false;
			});
		},
		close() {
			this.dialogVisible = false;
		}
	}
};
</script>

